<script setup>
import { reactive } from 'vue'
import moduleApi from '@/api/system/ModuleApi'
import useViewEvent from '@/core/hooks/useViewEvent'
const state = reactive({
  visible: false, //
  loading: false // 加载开关
})
// 表单结构
const original = {
  id: null,
  parentId: 0, // 父ID parentId
  code: '', // 编码
  name: '', // 名称
  intro: '', // 简介说明
  type: '', // 类型
  auth: false, // 是否验证
  acts: [], // 操作
  icon: '', // 图标
  path: '', // 链接
  component: '', // 组件
  idx: 1 // 排序
}
// 表单数据
const formState = reactive({})

// 初始化数据
const { InitializeData } = useViewEvent({state: state, remoteFetchData: moduleApi.getFormModelById, formState: formState, original: original })

// 向父组件暴露方法和属性
defineExpose({ InitializeData })
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`模块管理`"
    placement="right"
    :width="'30%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card draggable>
      <a-spin :spinning="state.loading">
        <!-- 表单内容 begin -->
        <a-descriptions :column="1" bordered :label-style="{width: '150px'}">
          <a-descriptions-item label="所属模块" :span="2">{{ formState.parentId }}</a-descriptions-item>
          <a-descriptions-item label="名称">{{ formState.name }}</a-descriptions-item>
          <a-descriptions-item label="标注">{{ formState.code }}</a-descriptions-item>
          <a-descriptions-item label="路径">{{ formState.path }}</a-descriptions-item>
          <a-descriptions-item label="类型">{{ formState.type }}</a-descriptions-item>
          <a-descriptions-item label="组件">{{ formState.component }}</a-descriptions-item>

          <a-descriptions-item label="排序">{{ formState.idx }}</a-descriptions-item>
          <a-descriptions-item label="图标"><d-icon-font :type="formState.icon" style="font-size: 14pt" /></a-descriptions-item>
          <a-descriptions-item label="操作">
            <a-tag v-for="item in formState.actLabels" :key="item" color="orange">{{ item }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="简介">{{ formState.intro }}</a-descriptions-item>
          <a-descriptions-item label="创建时间/人">{{ formState.createOn }}/ {{ formState.createBy }}</a-descriptions-item>
        </a-descriptions>
      </a-spin>
    </a-card>
  </a-drawer>
</template>
